<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				*zoom: 1;
			}


			.father {
				width: 400px;
				border: 2px dotted green;
				/* overflow: hidden; */
			}

			.son {
				height: 300px;
				width: 300px;
				background-color: yellow;
				float: left;

			}

			.erzi {
				height: 200px;
				width: 200px;
				background-color: skyblue;
				float: left;
			}

			.next {
				height: 300px;
				background-color: hotpink;
			}

			/* .clear {
				clear: both;
			} */
		</style>
	</head>
	<body>
		<h1>在实际开发中很多时候父盒子是不方便给高度的，所以我们希望浮动的子盒子自动撑开父盒子，但是子盒子加了浮动后，父盒子高度会变为零，影响了后面的标准流盒子布局，此时我们就需要清除浮动。</h1>
		<br>
		<ul>
			<li>清除浮动本质：清除浮动元素脱离标准流造成的影响</li>
			<li>清除浮动策略：闭合浮动，只让浮动盒子在父元素内部影响，不影响父盒子外部的其他盒子</li>
		</ul>
		<br>
		<br>
		<h2>一、额外标签法清除浮动。在最后一个浮动盒子后面机上一个空标签，但这个标签必须是块级元素，不能是行内元素，再添加样式clear:both即可清除浮动</h2>
		<!-- 这种方法不常用 -->
		<br>
		<h2>二、给父级元素添加overflow:hidden属性，overflow还可以取值auto或scroll，但后两个值不常用</h2>
		<h2>优点：代码简洁 缺点：无法显示溢出的部分</h2>
		<br>
		<h2>三、伪元素法，这种方法是升级版标签法，使用方法在父元素里加入clearfix类名。加类名时不要在前面加点，怎么老是错</h2>
		<h2>这种方法不会添加额外标签，开发中比较常用</h2>

		<!-- .clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		.clearfix {
			/* 用于兼容ie6、7 */
		*zoom: 1;
		}
		-->
		<br>
		<h2>四、双伪元素法，跟伪元素法类似，也是给父元素添加，但是更加严谨代码如下，使用方法和伪元素法一样添加类名clearfix即可</h2>

		<!-- .clearfix:before,.clearfix:after {
			content:"";
			display:table;
		}
		.clearfix:after {
			clear:both;
		}
		.clearfix {
			*zoom:1;
		}
		 -->


		<div class="father clearfix">
			<div class="son"></div>
			<div class="erzi"></div>
			<!-- <div class="clear"></div> -->
		</div>
		<div class="next"></div>

	</body>

</html>
